The ASP.NET 2.0 Anthology by Scott Allen & Jeff Atwood & Wyatt Barnett & Jon Galloway & Phil Haack

Author:Scott Allen & Jeff Atwood & Wyatt Barnett & Jon Galloway & Phil Haack [Allen, Scott]
Language: eng
Format: epub, mobi, pdf
ISBN: 9780980285819
Publisher: SitePoint Pty. Ltd.
Published: 2007-08-16T04:00:00+00:00

This markup produces a much more palatable system with very usable fly-out menus, as Figure 9.3 reveals.

Figure 9.3. The menu is much prettier, especially considering JavaScript is disabled!

Discussion

For a fairly concise style sheet, this is a fantastic result! Let’s see how we arrived at this outcome.

Simple CSS Inheritance

Similar to the way an object is extended in C#, an HTML node’s child nodes inherit many of their parents’ CSS properties—a concept known as inheritance. We can use CSS selectors to apply styles to specific children of a given HTML element. Let’s look at an example:

div#mainContent h2 { border-bottom: 1px solid blue; font-size: 1.5em; }

This style rule would make any h2 element contained within a div with the id of mainContent display at 1.5 times the page body’s default font size, with a blue bottom border.

Now, if you wanted to, you could have generated the same visual effect by applying a new class attribute to the heading. The style rule accompanying your new markup would look something like this:

h2.bigBlueHeader { border-bottom: 1px solid blue; font-size: 1.5em; }

But that would be the wrong way to approach the problem, for several reasons. For instance, what happens when you decide the headers should be red, and slightly smaller? Should you change any reference to the CSS class? Or should you just change the bigBlueHeader class to be small and red?

Had we used the first approach—taking advantage of the cascading aspect of Cascading Style Sheets by applying styles to elements within a given element—the change would be easy, not to mention all the bandwidth you’ll save by not having class="bigBlueHeader" all over the place.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.